<template>
	<view class="center">
		<uv-input placeholder="昵称" :maxlength="maxLength" 
			v-model="nickname" focus>
			<template v-slot:suffix>
				<uv-text type="info" :text="`${nickname.length}/${maxLength}`"></uv-text>
			</template>
		</uv-input>
		<view class="center__confirmButton">
			<uv-button text="确定" type="primary" 
				@click="uploadInfo" 
				:disabled="nickname === userInfo.nickname">
			</uv-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, ref } from 'vue'
	import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js'
	const userInfo = computed(() => {
		return store.userInfo
	})
	const maxLength = 15
	const nickname = ref<string>(userInfo.value.nickname)
	const uploadInfo = async () => {
		uni.showLoading({
			title: '更新中'
		})
		console.log("更新名字: " + JSON.stringify(nickname.value));
		await mutations.updateUserInfo({ nickname: nickname.value } as any)
		uni.hideLoading()
		await uni.navigateBack({
			animationType: 'slide-out-right',
			animationDuration: 200,
		})
	}
</script>

<style lang="scss" scoped>
	.center {
		flex: 1;
		flex-direction: column;
		margin: 0 50rpx 0 50rpx;
		padding-top: 50rpx;
		&__confirmButton {
			display: flex;
			flex-direction: row-reverse;
			margin-top: 30rpx;
		}
	}
</style>
